<template>
    <div class="Lo_ac_recharge">
        <header>
        <!-- 返回 -->
        <img @click='Lo_ac_recharge_back' class="Lo_ac_recharge_back" src="../../../static/imgs/return.png">
        <p>充值</p>
    </header>
    <main>
        <article class="re_one">
            <img src="../../../static/imgs/re_1_03.png" alt="">
            <input type="text" placeholder="输入充值余额">
        </article>

        <article class="re_two">
            <span>可用余额</span>
            <p>0.00元</p>
        </article>

        <article class="re_change">
            <img class="img_k" src="../../../static/imgs/re_1_06.png" alt="">
            <p>微信充值</p>
            <span></span>
        </article>

        <article class="re_change">
            <img class="img_k" src="../../../static/imgs/re_1_09.png" alt="">
            <p>支付宝充值</p>
            <span></span>
        </article>

        <article class="re_change">
            <img class="img_k" src="../../../static/imgs/re_1_11.png" alt="">
            <p>银联卡充值</p>
            <span></span>
        </article>

        <article class="re_change">
            <img class="img_k" src="../../../static/imgs/re_1_13.png" alt="">
            <p>健康卡充值</p>
            <span></span>
        </article>

        <div class="Lo_ac_recharge_btn">
            充值
        </div>

    </main>
        


    </div>
</template>
<script>
export default {
     name:'index',
     methods:{
      Lo_ac_recharge_back:function(){
          this.$router.go(-1)
      }
    }
}
</script>
<style scoped lang='less'>
  .px2rem(@name, @px){
  @{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}
.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}
.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}
.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-right,@right);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-left,@left);
}
.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}
.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}

html,body{
  height:100%;
  width:100%;
  /*background:#eff3f2;*/
}
header{
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .px2rem(height,88);
    .px2rem(font-size,40);
    .Flex;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .px2rem(width,55);
        .px2rem(height,53);
      }
}

.re_one{
  background:#ffffff;
  padding: 3.5% 5%;
  .Flex;
  img{
        .px2rem(width,55);
        .px2rem(height,45);
  }
  input{
    border:none;
    .margin-left(20);
  }

}
.re_two{
  padding: 3.5% 5%;
  .Flex;
  span{
      .font-size(30);
  }
  p{
    .margin-left(20);
    .font(30,#f6583f)
  }
}

.re_change{
    background:#ffffff;
    padding: 3.5% 5%;
    .Flex;
    align-items:center;
    border-bottom:1px solid #ccc;
     .img_k{
        .px2rem(height,70);
        flex:1;
     }
     p{
          .font-size(35);
          .margin-left(30);
          flex:7;
      }
     span{
      background:url("../../../static/imgs/dd-yuan.png") no-repeat;
        .px2rem(height,60);
        flex:1;
     }
     span.img_l{
        background:url("../../../static/imgs/acc_dui.png")  no-repeat;
     }

}

.Lo_ac_recharge_btn{
    position: absolute;
    width:85%;
    .px2rem(bottom,60);
    .px2rem(height,100);
    margin:0 auto;
    text-align: center;
    background:#1ac5a1;
    .font-size(40);
    color:#ffffff;
    .margin-left(50);
    .px2rem(border-radius,50);
    .line-height(100);
}


</style>













